<template>
	<view>
		<!-- 视频 -->
		<view class='video'>
			<image src='../../static/bg_zhibozhong2x.png'></image>
		</view>

		<view class='liveTitleBox'>
			<view class='liveTitles'>
				<view class='liveTitle'>
					<view class='liveState'>
						<image src='../../static/ic_zhibozhong2x.png'></image>直播中
					</view>
					<view class='liveTitleName'>【麦月小苍尔作文】如何写出更好的作文如何写出更好的作文</view>
				</view>
				<view class='from'>来自：麦月小苍尔作文
					<navigator url=''>查看详情</navigator>
				</view>
			</view>
		</view>

		<view class='chatTitle'>
			<view>直播间</view>
			<view>只看老师
				<switch bindchange="switchChange" />
			</view>
		</view>

		<!-- 聊天区域  -->
		<view class='chatBox clearfix'>
			<view class='chatLeft'>
				<image src='../../static/tx02.png'></image>
				<view class='leftChatInfo'>
					<view class='chatName'>小苍尔老师</view>
					<view class='chatCont'>此处要重点记忆啊</view>
				</view>
			</view>

			<view class='chatRight'>
				<view class='rightChatInfo'>
					<view class='chatName'>李能</view>
					<view class='chatCont'>好的</view>
				</view>
				<image src='../../static/tx03.png'></image>
			</view>
		</view>

		<!-- 底部菜单 -->
		<view class='bottomMenu'>
			<view class='inputs'>
				<image src='../../static/bj01.png'></image>
				<input type="text" placeholder="写评论..." placeholder-class="placeholder"></input>
				<image src='../../static/bq01.png'></image>
			</view>
			<view class='msg'>
				<image src='../../static/xx01.png'></image><text>5</text>
			</view>
			<view class='zan'>
				<image src='../../static/zan01.png'></image>
			</view>
		</view>
		<!-- 禁言 -->
		<!-- <view class='bottomMenu'>
	    <view class='inputs'>
	      <image src='../../static/bj02.png'></image>
	      <input type="text" placeholder="写评论..." placeholder-class="placeholder2" disabled="true"></input>
	      <image src='../../static/bq02.png'></image>
	    </view>
	    <view class='msg'><image src='../../static/xx02.png'></image></view>
	    <view class='zan'><image src='../../static/zan02.png'></image></view>
	  </view> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.video image {
		display: block;
		width: 750rpx;
		height: 480rpx;
	}

	/*  */
	.liveTitleBox {
		background: #fff;
		padding: 20rpx;
	}

	.liveTitle {
		display: flex;
	}

	.liveTitleName {
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.liveState {
		font-size: 18rpx;
		background: -webkit-linear-gradient(left, #F2458D, #FD3957);
		background: -o-linear-gradient(right, #F2458D, #FD3957);
		background: -moz-linear-gradient(right, #F2458D, #FD3957);
		background: linear-gradient(to right, #F2458D, #FD3957);
		color: #fff;
		display: inline-block;
		padding: 4rpx 0;
		border-radius: 6rpx;
		width: 110rpx;
		text-align: center;
	}

	.liveTitle image {
		width: 12rpx;
		height: 12rpx;
		margin-right: 5rpx;
	}

	.from {
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.from navigator {
		display: inline-block;
		color: #38A3FE;
		margin-left: 20rpx;
	}

	.chatTitle {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		background: #E1E3E6;
	}

	/* switch大小 */
	.wx-switch-input {
		zoom: .7;
		margin-left: 30rpx;
	}

	/* 聊天区域 */
	.chatBox {
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;
	}

	.chatLeft {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		float: left;
		clear: both;
	}

	.chatLeft image {
		width: 89rpx;
		height: 89rpx;
	}

	.leftChatInfo {
		margin-left: 20rpx;
		max-width: 80%;
	}

	.chatName {
		font-size: 20rpx;
		color: #999;
	}

	.chatCont {
		background: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		margin-top: 15rpx;
		color: #333;
	}

	.chatRight {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		float: right;
		clear: both;
	}

	.chatRight image {
		width: 89rpx;
		height: 89rpx;
	}

	.rightChatInfo {
		margin-right: 20rpx;
		max-width: 80%;
	}

	.rightChatInfo .chatName {
		text-align: right;
	}

	/*  */
	.bottomMenu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.inputs {
		display: flex;
		align-items: center;
		background: #F2F4F6;
		border: 1rpx solid #ECECEC;
		padding: 5rpx 20rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		width: 75%;
	}

	.inputs input {
		font-size: 26rpx;
		padding-left: 20rpx;
		width: 80%;
	}

	.placeholder {
		font-size: 26rpx;
		color: #000;
	}

	.placeholder2 {
		font-size: 26rpx;
		color: #ccc;
	}

	.inputs image:first-child {
		width: 26rpx;
		height: 26rpx;
	}

	.inputs image:last-child {
		width: 42rpx;
		height: 42rpx;
	}

	.msg {
		position: relative;
	}

	.msg text {
		position: absolute;
		top: -5rpx;
		right: -10rpx;
		width: 30rpx;
		height: 20rpx;
		border-radius: 20rpx;
		background: #F62E2E;
		text-align: center;
		line-height: 20rpx;
		font-size: 16rpx;
		color: #fff;
	}

	.msg image,
	.zan image {
		width: 40rpx;
		height: 40rpx;
	}
</style>
